<template>
  <!-- 注册表单 -->
  <div class="register-body" v-loading.lock.lock="loading">
    <el-input placeholder="请输入手机号" v-model="phone" clearable :prefix-icon="PhoneFilled" maxlength="11">
      <template #append>
        <el-button v-if="canGetCode" @click="getCode" type="primary">获取验证码</el-button>
        <el-button v-else disabled>{{ time }}s重新获取</el-button>
      </template>
    </el-input>

    <el-input placeholder="请输入验证码" v-model="code" clearable :prefix-icon="Key" maxlength="6"> </el-input>

    <el-input placeholder="请输入账号" v-model="account" clearable :prefix-icon="Avatar"> </el-input>

    <el-input placeholder="请输入密码" v-model="password" show-password :prefix-icon="Lock"> </el-input>
    <div class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="register" :loading="registerLoading">注 册</el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import axios from '../../utils/request'
import { Avatar, Lock, Key, PhoneFilled } from '@element-plus/icons-vue'
import { defineProps, defineEmits, ref } from 'vue'
let code = ref('')
let phone = ref('')
let account = ref('')
let password = ref('')
let time = ref(60)
let canGetCode = ref(true)
let loading = ref(false)
let registerLoading = ref(false)
// 定义自定义事件隐藏弹出层
const emit = defineEmits(['hide-register'])

// 隐藏注册窗口
const cancel = () => {
  code.value = ''
  phone.value = ''
  account.value = ''
  password.value = ''
  emit('hide-register')
}
// 注册
const register = async () => {
  // 手机号不能为空
  if (!phone) {
    return ElMessage.error('请输入手机号！')
  }
  // 手机号必须满足验证规则
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    return ElMessage.error('手机号格式错误！')
  }

  // 验证码不能为空
  if (code.value === '') {
    return ElMessage.error('验证码不能为空！')
  }
  // 验证码位6位有效数字
  if (!/\d{6}/.test(code.value)) {
    return ElMessage.error('验证码位6位有效数字！')
  }

  // 验证账号不能为空
  if (account.value === '') {
    return ElMessage.error('账号不能为空！')
  }
  // 账号长度在1-64之间
  if (!(account.value.length >= 1 && account.value.length <= 64)) {
    return ElMessage.error('账号长度在1-64之间!')
  }

  // 密码不能为空
  if (password.value === '') {
    return ElMessage.error('密码不能为空！')
  }
  // 密码必须包含字母和数字
  if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(password.value)) {
    return ElMessage.error('密码必须包含字母数字组合，且长度为6-16位！')
  }
  registerLoading.value = true
  try {
    // 发起请求注册账号
    const data = await axios.post('/api/pus/register', {
      name: account.value,
      password: password.value,
      phone: phone.value,
      code: code.value
    })
    if (data.code === 0) {
      // 注册成功
      ElMessage({
        message: '注册成功',
        type: 'success'
      })
      // 清空参数
      phone.value = ''
      password.value = ''
      code.value = ''
      account.value = ''
      emit('hide-register', false)
    } else {
      // 注册失败
      ElMessage.error('注册失败，' + data.msg)
    }
  } catch {
    ElMessage.error('请求失败！')
  } finally {
    registerLoading.value = false
  }
}

// 获取验证码
const getCode = async () => {
  // 手机号不能为空
  if (!phone.value) {
    return ElMessage({
      message: '请输入手机号！',
      type: 'error'
    })
  }
  // 手机号必须满足验证规则
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    return ElMessage({
      message: '手机号格式错误！',
      type: 'error'
    })
  }
  // 显示加载状态
  loading.value = true
  // 发起请求获取验证码
  try {
    const data = await axios.post('/api/getcode', {
      phone: phone.value
    })

    // 获取成功
    if (data.code === 0) {
      canGetCode.value = false
      ElMessage({
        message: '验证码发送成功，请注意查收！',
        type: 'success'
      })
      const timer = setInterval(() => {
        time.value--
        if (time.value <= 0) {
          clearInterval(timer)
          time.value = 60
          canGetCode.value = true
        }
      }, 1000)
    } else {
      ElMessage.error(data.msg)
    }
  } catch (err) {
    ElMessage.error(err)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.register-body {
  width: 80%;
  margin: 0 auto;

  :deep(.el-input) {
    margin-bottom: 15px;
  }
  :deep(.el-input-group__append) {
    background-color: #409eff;
    color: #fff;
  }
  :deep(.el-icon) {
    color: #409eff;
    font-size: 18px;
  }
}
.dialog-footer {
  text-align: center;
  margin-top: 30px;

  :deep(.el-icon) {
    color: #fff;
    font-size: 18px;
  }
}
</style>
